import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Select } from '@alifd/next';
import { system } from '../../../../../api/Menu';
import eventProxy from '../../../../../libs/eventProxy';
import AddDialog from '../AddDialog';

export default class FilterBar extends Component {
  static displayName = 'FilterBar';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      systems: [],
    };
  }

  componentDidMount() {
    system().then((response) => {
      const data = response.data.data;
      const selects = [];
    for (let index = 0; index < data.length; index++) {
      const element = data[index];
      selects.push(
        {
          label: element.name,
          value: element.code,
        }
      );
    }
    this.setState({
      systems: selects,
    });
    });
  }
  /**
   * Select 发生改变的时候触发的回调
   */
  handleSelectChange = (value) => {
    let cur;
    this.state.systems.forEach((ele) => {
      if (ele.value === value){
        cur = ele;
      }
    });
    this.setState({
      curSystem: cur,
    });
    eventProxy.trigger('system:select:change', value);
  };


  getFormValues =(values) => {
    
  }
  render() {
    const dataSource = this.state.systems;
    return (
      <IceContainer style={styles.container}>
        <Select
          size="large"
          style={{ width: '200px' }}
          placeholder="请选择系统"
          onChange={this.handleSelectChange}
          dataSource={dataSource} 
        />
        <AddDialog
          curSystem={this.state.curSystem}
          getFormValues={this.getFormValues}
        />
      </IceContainer>
    );
  }
}

const styles = {
  container: {
    display: 'flex',
     justifyContent: 'space-between',
  },
  text: {
    height: '35px',
    lineHeight: '35px',
  },
};
